<template>
  <div :id="id" class="box"></div>
</template>
<script>
export default {
  components: {},
  name: "myChart222",
  props: ["config", "id"],
  data() {
    return {
      myChart: "",
    };
  },
  methods: {
    init() {
      this.myChart = this.$echarts.init(document.getElementById(this.id));
      this.myChart.setOption({
        tooltip: {},
        legend: {
          data: [],
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: this.config.name,
        },
        series: [
          {
            name: "",
            type: "radar",
            // areaStyle: {normal: {}},
            data: this.config.data,
          },
        ],
      });
    },
  },
  mounted() {
    console.log(this.config);
    this.init();
  },
  //销毁组件
  destroyed() {
    this.myChart = "";
  },
};
</script>
<style>
.box {
  height: 100%;
  width: 100%;
}
</style>